<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        html,
        body,
        #app {
            height: 100%;
            min-width: 1366px;
        }

        .el-table__body-wrapper:: -o-scrollbar {
            display: none;
        }

        .el-table__body-wrapper:: -moz-scrollbar {
            display: none;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-table {
            position: relative;
        }

        .viewSendContentMsgBox {
            width: 45% !important;
            overflow-y: scroll !important;
            max-height: 80% !important;
        }
    </style>
    <link type="text/css" rel="styleSheet" href="css/element-ui.css"/>
    <script src="js/vue.min.js" type="application/javascript"></script>
    <!--    <script src="/js/jquery.js" type="application/javascript"></script>-->
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="js/axios.min.js"></script>
    <script src="js/element-ui.js" type="application/javascript"></script>
    <script src="common/common-js.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-tabs v-model="activeName" @tab-click="handleClick">


                <el-tab-pane label="测试环境调试" name="testEnv">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">
                                        <el-input placeholder="请输入信用代码" v-model="testEnvParams.creditCode" name="creditCode"></el-input>
                                    </div>
                                </el-col>
                                <el-col :span="1"></el-col> <!-- 增加间距 -->
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">
                                        <el-select v-model="testEnvParams.serviceCode" placeholder="请选择接口类型" name="serviceCode">
                                            <el-option label="账套数据" value="W01001"></el-option>
                                            <el-option label="账套科目初始化" value="W01002"></el-option>
                                            <el-option label="会计凭证数据" value="W01003"></el-option>
                                            <el-option label="集体土地" value="W02005"></el-option>
                                            <el-option label="无形资产" value="W02004"></el-option>
                                            <el-option label="存货资产" value="W02003"></el-option>
                                            <el-option label="生物资产" value="W02002"></el-option>
                                            <el-option label="固定资产" value="W02001"></el-option>
                                            <el-option label="固定资产-信息变更" value="W01006"></el-option>
                                            <el-option label="固定资产-价值变动" value="W01007"></el-option>
                                            <el-option label="固定资产-处置记录" value="W01008"></el-option>
                                            <el-option label="固定资产-折旧记录" value="W01009"></el-option>
                                            <el-option label="收支日记账" value="W04001"></el-option>
                                            <el-option label="债权公布" value="W01012"></el-option>
                                            <el-option label="债务公布" value="W01011"></el-option>
                                            <el-option label="资产负债表" value="W01010"></el-option>
                                            <el-option label="收益及收益分配表" value="WG01013"></el-option>
                                            <el-option label="收入明细表" value="WG01014"></el-option>
                                            <el-option label="支出明细表" value="WG01015"></el-option>
                                            <el-option label="合同信息" value="W03001"></el-option>
                                            <el-option label="账套月结" value="W01004"></el-option>
                                            <el-option label="资产地图" value="W91001"></el-option>
                                            <el-option label="经济组织地图定位" value="W92001"></el-option>
                                            <el-option label="其他接口" value="DJ_ZDY"></el-option>
                                            <el-option label="附件上传" value="DJ_FILE"></el-option>
                                        </el-select>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">
                                        <el-input v-show="testEnvParams.serviceCode == 'DJ_FILE' || testEnvParams.serviceCode == 'DJ_ZDY'" placeholder="请输入接口编码" v-model="testEnvParams.customServiceCode" name="customServiceCode"></el-input>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple">
                                        <el-radio-group v-model="testEnvParams.opType" name="opType">
                                            <el-radio-button label="1">新增/修改</el-radio-button>
                                            <el-radio-button label="3">删除</el-radio-button>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                                <el-button type="primary" @click="getTemplateData">获取模板数据</el-button>
                            </el-row>


                            <el-row style="margin-top: 15px;">
                                <el-col :span="20">
                                    <div class="grid-content bg-purple">
                                        <el-input
                                                type="textarea"
                                                :rows="5"
                                                placeholder="请输入发送报文"
                                                v-model="testEnvParams.content"
                                                name="content">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>


                            <el-row style="margin-top: 15px;">
                                <el-col :span="24">
                                    <el-button type="primary" @click="sendTestEnvData" v-show="testEnvParams.serviceCode != 'DJ_FILE'">发送</el-button>
                                    <el-upload
                                            class="upload-demo"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :on-success="handleUploadSuccess"
                                            :file-list="testEnvParams.fileList"
                                            v-show="testEnvParams.serviceCode == 'DJ_FILE'">
                                        <el-button slot="trigger">上传文件</el-button>
                                    </el-upload>
                                    <el-button type="primary" @click="sendTestEnvFile" v-show="testEnvParams.serviceCode == 'DJ_FILE'">发送附件</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-tab-pane>


            </el-tabs>
        </div>
    </el-card>
</div>
</body>



<script>
    // import FileSaver from 'file-saver';
    // import XLSX from 'xlsx';

    var vue = new Vue({
        el: '#app',
        data() {
            return {
                activeName: 'testEnv',
                testEnvParams: {
                    creditCode: '',
                    opType: '1',
                    serviceCode: '',
                    customServiceCode: '',
                    content: '',
                    fileList: [],
                },
                currentTabName: ''
            }
        },
        methods: {
            //菜单改变事件
            handleClick(tab, event) {
                this.currentTabName = tab.name;
            },

            // 测试环境调用
            getTestEnvParams(testEnvParams) {
                let param = {};
                param.creditCode = testEnvParams.creditCode;
                param.opType = testEnvParams.opType;
                param.serviceCode = testEnvParams.serviceCode;
                param.customServiceCode = testEnvParams.customServiceCode;
                param.content = encodeURIComponent(testEnvParams.content);
                return param;
            },
            // 获取模板数据
            async getTemplateData() {
                const {data} = await axios.get('duijie/testEnv/generate', {params: this.getTestEnvParams(this.testEnvParams)})
                this.testEnvParams.content = data.data;
            },
            async sendTestEnvData() {
                // 发送数据的接口调用逻辑
                const {data} = await axios.get('duijie/testEnv/start', {params: this.getTestEnvParams(this.testEnvParams)})
                if (data.code === 200) {
                    this.$message({
                        message: data.message,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: data,
                        type: 'error'
                    });
                }
            },
            // async sendTestEnvFile(file, fileList) {
                // 文件选择后直接调用接口传递文件
                // this.testEnvParams.fileList = fileList; // 更新文件列表
            async sendTestEnvFile() {
                // 模拟调用接口传递文件
                const formData = new FormData();
                let file = this.testEnvParams.fileList[0];
                formData.append('file', file.raw); // 将文件添加到 FormData 中
                formData.append('creditCode', this.testEnvParams.creditCode);
                formData.append('opType', this.testEnvParams.opType);
                formData.append('serviceCode', this.testEnvParams.serviceCode);
                formData.append('customServiceCode', this.testEnvParams.customServiceCode);
                formData.append('content', encodeURIComponent(this.testEnvParams.content));
                axios.post('duijie/testEnv/file', formData)
                    .then(response => {
                        let data = response.data;
                        if (data.code === 200) {
                            this.$message({
                                message: data.message,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: data,
                                type: 'error'
                            });
                        }
                    })
                    .catch(error => {
                        this.$message({
                            message: error,
                            type: 'error'
                        });
                    });
            },
            handleUploadSuccess(response, file) {
                // 文件上传成功的处理逻辑
                // console.log('文件上传成功', response);
                this.testEnvParams.fileList.length = 0;
                this.testEnvParams.fileList.push(file);
            }
        },
        filters: {
            dataFilter(date) {
                var unixTimestamp = new Date(date);
                var commonTime = unixTimestamp.toLocaleString();
                return commonTime;
            }
        },
        created() {
        }
    })
</script>

</html>